﻿<html>
<head><meta charset="utf-8"><title>demo - lesson 4</title></head>

<body>
<style>
.noborder{border:groove;background-color:#999;width:750px;}
.divWithCanvas{background-color:#fff;width:100%;height:450px;}
</style>

<div class="noborder">
<div class="divWithCanvas" id="containerView"><canvas id="webglView" style="width:100%;height:100%"></canvas></div><br>

<input type="button" value = "Origin" title="绘制原图" onclick="appendLog('Calling renderOrigin()');renderOrigin()">
<input type="button" value = "Inverse" title="绘制反色" onclick="appendLog('Calling renderInverse()');renderInverse()">
<input type="button" value = "Emboss" title="绘制浮雕" onclick="appendLog('Calling renderEmboss()');renderEmboss()">
<input type="button" value = "Edge" title="绘制边缘" onclick="appendLog('Calling renderEdge()');renderEdge()">
<input type="button" value = "Wave" title="绘制波纹" onclick="appendLog('Calling renderWave()');renderWave()">
<br>
<div style="border:groove;background-color:#ddd"><textarea id="logBox" style="border:groove;margin:auto;width:100%;height:300px;left:1px">WebGL is initializing...
</textarea>
<input type="button" value = "Clear Log" title="清除日志" onclick="clearLogbox()"><input type="button" value = "Maximize Logbox" title="放大日志窗口" onclick="maximizeLogbox()"><input type="button" value = "Restore Logbox" title="恢复日志窗口" onclick="restoreLogbox()">
</div>
</div>

<script id="vsh_lesson3" type="x-shader/x-vertex">
precision mediump float;
attribute vec4 position;
attribute vec4 inputTextureCoordinate;
varying vec2 textureCoordinate;
void main()
{
	gl_Position = position;
	// 这是一种取巧的做法，强行把顶点坐标映射为纹理坐标，
	// 但是仅适用于本章用到的刚好占满整个viewport的顶点哦。
	textureCoordinate = vec2((position.x+1.0)/2.0, 1.0-(position.y+1.0)/2.0);
}
</script>

<script id="fsh_origin" type="x-shader/x-fragment">
precision mediump float;
varying vec2 textureCoordinate;
uniform sampler2D inputImageTexture;
void main()
{
	gl_FragColor = texture2D(inputImageTexture, textureCoordinate);
}
</script>
<script id="fsh_inverse" type="x-shader/x-fragment">
precision mediump float;
varying vec2 textureCoordinate;
uniform sampler2D inputImageTexture;
void main()
{
	gl_FragColor = vec4(1.0 - texture2D(inputImageTexture, textureCoordinate).rgb, 1.0);
}
</script>
<script id="fsh_emboss" type="x-shader/x-fragment">
//浮雕效果:
precision mediump float;
varying vec2 textureCoordinate;
uniform sampler2D inputImageTexture;
uniform vec2 steps;
const float stride = 2.0;
void main()
{
    
    vec3 tmpColor = texture2D(inputImageTexture, textureCoordinate + steps * stride).rgb;
    tmpColor = texture2D(inputImageTexture, textureCoordinate).rgb - tmpColor + 0.5;
    float f = (tmpColor.r + tmpColor.g + tmpColor.b) / 3.0;
    gl_FragColor = vec4(f, f, f, 1.0);
}
</script>
<script id="fsh_edge" type="x-shader/x-fragment">
//显示边缘：
precision mediump float;
varying vec2 textureCoordinate;
uniform sampler2D inputImageTexture;
uniform vec2 steps;

const float stride = 1.0;

void main()
{
    
    vec3 tmpColor = texture2D(inputImageTexture, textureCoordinate + steps * stride).rgb;
    tmpColor = abs(texture2D(inputImageTexture, textureCoordinate).rgb - tmpColor);
    gl_FragColor = vec4(tmpColor * 2.0, 1.0);
}
</script>
<script id="fsh_wave" type="x-shader/x-fragment">
//波纹：
precision mediump float;
varying vec2 textureCoordinate;
uniform sampler2D inputImageTexture;
uniform float motion;
uniform float angle;

void main()
{
    vec2 tmp = textureCoordinate;
    tmp.x = tmp.x + 0.01 * sin(motion +  tmp.x * angle);
    tmp.y = tmp.y + 0.01 * sin(motion +  tmp.y * angle);
    gl_FragColor = texture2D(inputImageTexture, tmp);
}
</script>
<script src="functions_lesson_4.js"></script>
<script>
function imageOnload() {	
	if(webgl == null)
	{
		appendLog("See more: http://get.webgl.org/");
		return;
	}
	appendLog("WebGL is supported! That's cool!\nHere are some infomation for your device:");
	appendLog("The max renderbuffer size your browser support: " + 	webgl.getParameter(webgl.MAX_RENDERBUFFER_SIZE));
	appendLog("The max texture image units your browser support: " + webgl.getParameter(webgl.MAX_TEXTURE_IMAGE_UNITS));
	appendLog("The max texture size your browser support: " + webgl.getParameter(webgl.MAX_TEXTURE_SIZE));
	appendLog("The max cube map texture size your browser support: " + webgl.getParameter(webgl.MAX_CUBE_MAP_TEXTURE_SIZE));
	appendLog("The max viewport dims your browser support: " + webgl.getParameter(webgl.MAX_VIEWPORT_DIMS)[0] + " x " + webgl.getParameter(gl.MAX_VIEWPORT_DIMS)[1]);
}
</script>
<div style="display:none"><img src="vocaloid.jpg" id="vocaloid" onload="appendLog('Image loaded, calling renderWave()');renderWave();imageOnload();"></div>
</body>
</html>